<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@include file="include.jsp" %>
<title>Insert title here</title>
<style type="text/css"  >
.abc {
	border-color: gray;background-color: red;
}
</style>
</head>
<body>
显示区：<br />
<span>
	<span id="span">aaaaaaaaaaaaaaaaaaaaa</span><br />
	<span class="span abc" >bbbbbbbbbbbbbbbbb</span><br />
	<span class="span abc">cccccccccccccccccccccc</span><br />
</span>
<hr />
源码：<br />
&lt;span&gt;
	&lt;span id="span"&gt;aaaaaaaaaaaaaaaaaaa&lt;/span&gt;<br />
	&lt;span class="span"&gt;bbbbbbbbbbbbbbbbbb&lt;/span&gt;<br />
	&lt;span class="span"&gt;ccccccccccccccccc&lt;/span&gt;<br />
&lt;/span&gt;
<hr />
操作区<br />

query与get:<br />
<input type="button" value="class query 选择" id="aa" />
<input type="button" value="class get 选择" id="bb" />
<input type="button" value="id get 选择" id="cc" />

<script type="text/javascript">
	
/**
 * 选择出来以后，有 多个。
 */
KISSY.use("dom,event",function(S,d,event){
	event.on("#aa","click",function(){
		KISSY.each(d.query(".span"),function(s){  //s当前
			alert("kissy 内容:"+d.text(s))
		});
		
		$.each($(".span"),function(a){
			alert("jQuery 内容"+$(this).text());
		});
	});
	
	event.on("#bb","click",function(){
		var t = d.get(".span");
		alert(d.text(t));
	});
	event.on("#cc","click",function(){
		var t = d.get("#span");
		alert(d.text(t));
	});
})

	
</script>
<br />
addClass与removeClass:<br>
<input type="button" value="增加样式addclass(KISSY实现)" onclick="DESKSOFT.k4.kissyAddclass();">
<input type="button" value="移除样式addclass(jQuery实现)" onclick="DESKSOFT.k4.jQueryRemomvclass();"><br />

show与hide<br />
<input type="button" value="隐藏hide(KISSY实现)" onclick="DESKSOFT.k4.kissHide()">

<input type="button" value="显示hide(jQuery实现)" onclick="DESKSOFT.k4.jQueryShow()"><br />

toggleClass的简单使用<br />
<input type="button" value="交替显示改变样式(KISSY实现)" onclick="DESKSOFT.k4.kissyToggleClass();">
<input type="button" value="交替显示改变样式(JQUERY实现)" onclick="DESKSOFT.k4.jQueryToggleclass();">
<script type="text/javascript">
KISSY.use("dom",function(S,d){
	DESKSOFT.k4.dom  = d
})

DESKSOFT.k4 = {
		dom : { } ,
		kissyAddclass : function(){
			this.dom.addClass("#span","abc");
			$("#span").addClass("abc");
		},
		jQueryRemomvclass : function(){
			$("#span").removeClass("abc");
		},
		jQueryShow : function(){
			$("span").show();
		},
		kissHide : function(){
			this.dom.hide("span");
		},
		kissyToggleClass : function(){
			this.dom.toggleClass("#span","abc");
		},
		jQueryToggleclass : function(){
			$("#span").toggleClass("abc");
		}
}
</script>
</body>
</html>